<template>
	<view class="content">
		<view class="user-block">
			<image src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/mine/bg.jpg"
				mode="widthFix" class='bg-img'></image>
			<image :src="user?user.faceUrl:imageUrl+'/mine/default_face.png'" class="user-photo"></image>
			<view class="user-info">
				<view v-if="!user" @click="navigate('/page_other/login/select')" class="user-name">立即登录</view>
				<view v-else class="user-name">{{user.name?user.name:'游客'}}
					<text class="user-text"></text>
				</view>
				<view @click="navigate('/page_other/personal/index')" v-if="user" class="edit-resume"><text
						style="margin-right: 10rpx;" class="iconfont icon-bianjishuru"></text>编辑个人信息</view>
			</view>
		</view>
		<view class="menu-block">
			<view @click="navigate('/page_other/myBus/index')" class="menu-item">
				<image class="menu-icon iconfont icon-tuichudenglu"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/dk.png"
					style="width: 35rpx;height: 35rpx;margin: 0 20rpx;"></image>
				<view class="menu-name">我的贷款</view>
				<image class="more"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png">
				</image>
			</view>
			<view @click="navigate('/page_other/myApply/index')" class="menu-item">
				<image class="menu-icon iconfont icon-tuichudenglu"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/bm.png"
					style="width: 35rpx;height: 35rpx;margin: 0 20rpx;"></image>
				<view class="menu-name">我的报名</view>
				<image class="more"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png">
				</image>
			</view>
			<view @click="navigate('/page_other/mySite/index')" class="menu-item">
				<image class="menu-icon iconfont icon-tuichudenglu"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/cd.png"
					style="width: 35rpx;height: 35rpx;margin: 0 20rpx;"></image>
				<view class="menu-name">场地申请</view>
				<image class="more"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png">
				</image>
			</view>
			<view @click="navigate('/page_other/project_right/my-complaint/index')" class="menu-item">
				<image class="menu-icon iconfont icon-tuichudenglu"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/cd.png"
					style="width: 35rpx;height: 35rpx;margin: 0 20rpx;"></image>
				<view class="menu-name">我的投诉</view>
				<image class="more"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png">
				</image>
			</view>
			<view v-if="user" @click="identityMenu()" class="menu-item">
				<image class="menu-icon iconfont icon-tuichudenglu"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/tuichu.png"
					style="width: 35rpx;height: 35rpx;margin: 0 20rpx;"></image>
				<view class="menu-name">退出登录</view>
				<image class="more"
					src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/home/jq-erq/more.png">
				</image>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		getStorage,
		removeStorage
	} from '@/util/auth.js';
	import {
		getUserInfoApi
	} from '@/api/user.js';
	export default {
		data() {
			return {
				imageUrl: '',
				user: ''
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},

			identityMenu() {
				uni.showModal({
					title: '提示',
					content: `确定要退出重新登录吗？`,
					confirmColor: '#FF7626',
					success: (res) => {
						if (res.confirm) {
							this.$store.commit('user/SET_TOKEN', null)
							this.$store.commit('user/SET_USER', null)
							this.$store.commit('user/SET_IDENTITY', null)
							this.user.name = '';
							uni.$TUIKit && uni.$TUIKit.logout()
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}
				})
			},
			getUser() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserInfoApi({}).then(data => {
					uni.hideLoading()
					this.user = data
				}).catch((data) => {
					uni.hideLoading()
				})
			},
		},
		onShow() {
			this.user = getStorage('user');
			if(this.user)
			{
				this.getUser();
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
	}

	.more {
		width: 35rpx;
		height: 35rpx;
		// font-size: 32rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.content {
		width: 100%;
		padding: 30rpx;

		.block {
			width: 100%;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}

		.user-block {
			height: 320rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.bg-img {
				width: calc(100% - 60rpx);
				position: absolute;
				left: 30rpx;
				right: 30rpx;
				border-radius: 16rpx;
			}

			.user-photo {
				width: 130rpx;
				height: 130rpx;
				background: #efefef;
				border-radius: 50%;
				margin-right: 20rpx;
				position: relative;
			}

			.user-info {
				width: calc(100% - 150rpx);
				color: #fff;
				position: relative;

				.user-name {
					font-weight: bold;

					.user-text {
						font-size: 24rpx;
						margin-left: 10%;
						color: #c6c6c6;
					}
				}

				.user-name1 {
					font-weight: bold;
					margin-bottom: 10rpx;

					.user-text {
						font-size: 24rpx;
						margin-left: 10%;
						color: #c6c6c6;
					}
				}

				.edit-resume {
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
		}

		.statistical-block {
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 45rpx 0;

			.statistical-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.num {
					font-weight: bold;
					font-size: 36rpx;
				}

				.name {
					font-size: 26rpx;
					color: #313131;
					margin-top: 15rpx;
				}
			}
		}

		.menu-block {
			margin-top: 40rpx;
			background: #fff;

			.menu-item {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 100rpx;

				>view {
					border-bottom: 1px solid #efefef;
					height: 100%;
				}

				.menu-icon,
				.arrow {
					width: 70rpx;
					height: 100rpx;
					line-height: 100rpx;
				}

				.menu-icon {
					text-align: left;
				}

				.arrow {
					color: #c6c6c6;
					text-align: right;
				}

				.menu-name {
					width: calc(100% - 140rpx);
					font-size: 28rpx;
					line-height: 100rpx;
				}
			}

			.menu-item:last-child {
				border: none;
			}
		}
	}
</style>
